<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<uni-list>
			<uni-list-item v-for="(item, index) in pointList" :key="item.pointRealId">
				<template v-slot:header>
					<view class="uni-thumb equipment-picture">
						<u-album :urls="item.picUrl" multipleMode="aspectFill" multipleSize="120" maxCount="1"
							:showMore="false"></u-album>
					</view>
				</template>
				<view slot="body" class="equipment-Item" @click="gotoRecord(item.pointRealId)">
					<view class="uni-equipmentName">
						<text>{{item.name}}</text>
					</view>
					<view class="recordInfo">
						<view class="uni-note uni-description">
							<text style="height: 40px;">{{item.description}}</text>
						</view>
						<view>
							<text class="uni-description" style="margin-bottom: 10px;">总计检测{{item.recordCount}}次</text>
						</view>
						<view class="uni-note uni-collectedTime">
							最后检测于:{{item.collectedTime==null?'暂无':item.collectedTime}}</view>
					</view>
				</view>
				<template v-slot:footer>
					<image @click="gotoRecord(item.pointRealId)" class="slot-image"
						:src="judgeHealth(item.healthStatus)" mode="widthFix"></image>
				</template>
			</uni-list-item>
		</uni-list>
		<u-gap height="30" bgColor="#f3f4f6"></u-gap>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#0055ff",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "测点列表",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				userInfo: '',
				pointList: [],
				pageSize: 30,
				equipmentRealId: '',
				pageIndex: 1,
			};
		},
		onLoad(option) {
			this.equipmentRealId = option.equipmentRealId;
			uni.request({
				url: getApp().globalData.serverAddress + this.$uri.Uri_getEquipment.replace("{userRealId}", this
						.userInfo.userRealId)
					.replace("{equipmentRealId}", this.equipmentRealId),
				dataType: "json",
				method: "GET",
				success: (res) => {
					var nametitle = res.data.data.name + "-测点"
					if (nametitle.length > 10) {
						this.mysNavConfig.navTitle.text = nametitle.slice(0, 10) + '...'
					} else {
						this.mysNavConfig.navTitle.text = nametitle
					}
				}
			})
			this.userInfo = uni.getStorageSync('userInfo');
			this.getPointList(this.pageIndex);
		},
		methods: {
			getPointList(pageIndex) {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_getPointList.replace("{userRealId}",
							this.userInfo.userRealId)
						.replace("{equipmentRealId}", this.equipmentRealId),
					data: {
						page: pageIndex,
						limit: this.pageSize
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						if (res.data.count > 0) {
							for (let i = 0; i < res.data.count; i++) {
								var arr = []
								for (const item of res.data.data[i].picUrl) {
									arr.push(getApp().globalData.serverAddress + item)
								}
								res.data.data[i].picUrl = arr
								this.pointList.push(res.data.data[i]);
							}
						}
					},
					fail(res) {
						console.log(res);
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			gotoRecord(value) {
				uni.navigateTo({
					url: '/pages/records/recordList?pointRealId=' + value + "&equipmentRealId=" + this
						.equipmentRealId
				})
			},
			onLeftClick() {
				uni.switchTab({
					url: '/pages/tabbar/homepage'
				});
			},
			judgeHealth(value) {
				if (value == 1) {
					return;
				} else if (value == 2) {
					return '/static/img/yvjing.png';
				} else if (value == 3) {
					return '/static/img/baojing.png';
				}
			}
		}
	};
</script>
<style lang="scss">
	@import '@/common/uni-ui.scss';

	.u-album__row__wrapper image {
		width: 120px !important;
		height: 120px !important;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin: 45px 15px 0px 0px;
		width: 38px;
		height: 38px;
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.equipment-Item {
		width: 1px;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 10px;
	}

	.equipment-picture {
		width: 120px;
		height: 120px;
	}


	.recordInfo {
		margin-top: 10px;
		font-size: 12px;
	}


	.uni-equipmentName {
		margin: 5px 0px;
		font-weight: bold;
		overflow: hidden;
		font-size: 20px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-description {
		color: #909399;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		font-size: 14px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.uni-collectedTime {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		font-size: 14px;
		color: #0a4bff;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
